<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>热播剧集</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
    <script src="./fonts/iconfont.js"></script>
</head>
    <style>
        #bnav1 svg{
            width: 5vw;
            height: 5vw;
            position: relative;
            top: -10vw;
            left: 5vw;
        }
        #bnav1 #text1{
           font-size: 5vw;
           margin-left: 18vw;
           border-bottom: 5px solid #000;
           line-height: 1.5;
           width: 2vw;
           position: relative;
            top: -10vw;      
        }
        #bnav1 #text2{
           font-size: 5vw;
           margin-left: 5vw;
           color: rgb(169, 169, 170);
           position: relative;
            top: -10vw;    
        }
    
        #bnav2 svg{
            height: 10vw;
           position: relative;
           top: 0vw;
           left: 50vw;
        }
        #bnav1 #p1{
            background-color: rgb(191, 215, 191);
            margin-left: 5vw;
            border: 4px solid rgb(191, 215, 191);  
            border-radius: 15%;  
            font-size:4vw;
            color: green;
            height: 20px;
            position: relative;
            top: -25px;
        }
        #bnav1 #p2,#p3,#p4,#p5,#p6{
            background-color: #eee;
            margin-left: 3vw;
            border: 4px solid #eee;  
            border-radius: 15%;  
            font-size:4vw;
            position: relative;
            top: -25px;
        }
       #bnav1 .icon1{
        margin-left: 82vw;
        position: relative;
        top: -50px;
        border: 4px solid #eee;  
        border-radius: 15%;  
        background-color: #eee;
       }

       /* swiper */
    html,
    body {
      position: relative;
    }

    body {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
    position: relative;
      width: 65%;/* 改整个占比 */
      height: 100%;
      left: 15vw;
      top: -108vw;
      border-radius: 3vw;/* 更改轮播图 */
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 65vw;
      object-fit: cover;
      border-radius: 3vw;
    }

    .list .t1{/* 神隐 */
        font-size: 6vw;
        top: -10vw;
        left: 10vw;
        position: relative;
    }
    .list .icon2{
        margin-left: -10vw;
        position: relative;
        height: 4vw;
        left: -23vw;
        top: -2vw;
       }
       .list .icon3{
        margin-left: -10vw;
        position: relative;
        height: 6vw;
        left: 62vw;
        top: -17vw;
       }
       .list .t2{
        color: #d97e22;
        font-size: 3vw;
        position: relative;
        height: 6vw;
        left: 89vw;
        top: -17vw;
       }
       .list .t3{
        color: rgb(146, 142, 142);
        font-size: 3vw;
        position: relative;
        top: -20vw;
        left: 4vw;
        line-height: 0.5;
       }
       .list .t4{
        color: rgb(146, 142, 142);
        font-size: 3vw;
        position: relative;
        top: -18vw;
        left: 4vw;
       }
       .list h4{
        position: relative;
        top: -15vw;
        left: 4vw;
       border-bottom: 2px solid #eee;
       } 
       #F-1 img{
        width: 25%;
        height: 50%;
        position: relative;
        left: 5vw;
        top: -14vw;
       }
     
    
       .list2 .icon4{
        margin-left: -10vw;
        position: relative;
        height: 4vw;
        left: -22vw;
        top: -46vw;
       }
       .list2 .t5{
        margin-top: -54vw;
        margin-left: 12vw;
        font-size: 6vw;
       }
       .list2 .icon5{
        height: 6vw;
        position: relative;
        top: -6vw;
        margin-left: 52vw;
       }
       .list2 .t6{
        position: relative;
        top: -5vw;
        margin-left: 89vw;
        color: #d97e22;
        font-size: 3vw;
       }
       .list2 .t7{
        color: rgb(146, 142, 142);
        font-size: 3vw;
        margin-top: -7vw;
        margin-left: 6vw;
        line-height: 0.5;
       }
       .list2 .t8{
        color: rgb(146, 142, 142);
        font-size: 3vw;
        margin-left: 6vw;
        line-height: 2.5;
       }
       .list2 h4{
        margin-left: 6vw;
       border-bottom: 2px solid #eee;
       }
       #F img{
        width: 25%;
        position: relative;
        left: 5vw;
        top: -8vw;
        border-radius: 2vw;
       }
       #F2-1 img{
        width: 27%;
        position: relative;
        left: 4vw;
        top: -50vw;
        border-radius: 2vw;
       }
       #F2-2 img{
        width: 50%;
        position: relative;
        left: 5vw;
        top: -12vw;
        border-radius: 1vw;
       }
    </style>

<body>
    <nav id="bnav2">  
        <ul>
            <li>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo1"></use>
                    </svg>
                </div>
            </li>
           
        </ul>
    </nav>
    <nav id="bnav1">  
        <ul>
            <li>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui1"></use>
                    </svg>
                    <span id="text1">热播剧集</span>  
                    <span id="text2">热播综艺</span> 
                    
                </div> 
            </li>
           <span id="p1">综合</span>  
            <span id="p2">国产剧</span> 
            <span id="p3">欧美剧</span>  
            <span id="p4">日剧</span> 
            <span id="p5">韩剧</span>   
            <li>
                <div>
                    <svg class="icon1" aria-hidden="true">
                        <use xlink:href="#icon-shaixuan "></use>
                    </svg>
                </div> 
            </li>
        </ul>
    </nav>
    <main>
    <div id="F">
    <img src="./images/榜单1.jpg" ></span>
    </div>
    <ul class="list">
        <li>
         <svg class="icon2" aria-hidden="true">
            <use xlink:href="#icon-bofang1-copy"></use>
        </svg> 
        <p class="t1"><strong>神隐(2023)</strong></p>
        <svg class="icon3" aria-hidden="true">
            <use xlink:href="#icon-xiangkan-copy"></use>
        </svg> 
        <p class="t2">想看</p>
        <p class="t3">暂无评分</p>
        <p class="t4">2023/中国大陆/剧情 爱情 奇幻 古装/陈家...</p>
         <h4>励志上进的水凝兽阿音和神力被封的真神之子古晋
            因一场意外相识,从此走上寻找风隐仙元之路，此
            后在妖族狐狸鸿奕,鹰族公主宴爽这些小伙...<a href="#">展开>></a></h4>
        </li>
     </ul>
     <div id="F-1">
        <img src="./images/可播放.jpg">
     </div>
      <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./images/神隐轮播2.jpg"></div>
      <div class="swiper-slide"><img src="./images/神隐轮播3.jpg"></div>
      <div class="swiper-slide"><img src="./images/神隐轮播4.jpg"></div>
    </div>
    <div class="swiper-pagination" ></div>
  </div>

  <div id="F2-1">
    <img src="./images/榜单4.jpg" >
  </div>
   <ul class="list2">
    <li> 
     <svg class="icon4" aria-hidden="true">
        <use xlink:href="#icon-bofang1-copy"></use>
    </svg> 
    <p class="t5"><strong>新闻女王(2023)</strong></p>
    <svg class="icon5" aria-hidden="true">
        <use xlink:href="#icon-xiangkan-copy"></use>
    </svg> 
    <p class="t6">想看</p>
    <p class="t7">⭐⭐⭐⭐ 7.8</p>
    <p class="t8">2023/中国大陆 中国香港/剧情 /陈海斌 姜...</p>
     <h4>收视最高的六点半新闻报道是主播的必争之地。在
        新闻电视部，资深主播文慧心(余诗曼饰)和梁景
        任(马国明饰)分成两派,平分秋色，前者一番兴</h4>
    </li>
 </ul>
</main>
    <div id="F2-2">
         <img src="./images/新闻女王可播放.jpg">
    </div>
  <!-- Swiper -->
 <div class="swiper mySwiper">
<div class="swiper-wrapper">
  <div class="swiper-slide"><img src="./images/新闻女王2.jpg"></div>
  <div class="swiper-slide"><img src="./images/新闻女王3.jpg"></div>
  <div class="swiper-slide"><img src="./images/新闻女王4.jpg"></div>
</div> 
<div class="swiper-pagination" ></div>
</div> 

  <!-- Swiper JS -->
  <script src="./swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
        dynamicBullets: true,
      },
    });
  </script>
</body>
</html>